<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '收藏列表',
    backgroundColor: '#f1f1f1',
  },
}
</route>

<template>
  <view class="min-h-screen bg-gray-50">
    <view class="p-4 grid grid-cols-2 gap-2">
      <view
        v-for="(store, index) in storeList"
        :key="index"
        @click="toStorePage(store)"
        class="bg-white rounded-lg shadow-sm overflow-hidden relative mb-2"
      >
        <view class="flex flex-col border-l-orange-500 items-center">
          <image
            :src="store.storeImage"
            :alt="store.storeName"
            class="w-full max-h-30 object-cover"
          />
          <view class="flex-1 p-2 flex flex-col h-full">
            <view class="font-bold text-gray-800 line-clamp-1">{{ store.storeName }}</view>
          </view>
        </view>

        <wd-button
          type="icon"
          icon="delete"
          class="absolute! top-2 right-2 bg-white! text-red-500!"
          @click.stop="deleteCollect(store)"
        ></wd-button>
      </view>
    </view>

    <wd-status-tip image="content" v-if="storeList?.length == 0" tip="未收藏店铺" />
  </view>
</template>

<script setup>
import { http } from '@/utils/http'

const storeList = ref([])

const getData = async () => {
  let res = await http.get('/api/collect/list')
  if (res.code == 200) {
    storeList.value = res.data.list
  }
}

const toStorePage = (store) => {
  uni.navigateTo({
    url: `/pages/store/detail?id=${store.storeId}`,
  })
}

const deleteCollect = async (store) => {
  let res = await http({
    method: 'get',
    url: `/api/collect/removeStore?storeId=${store.storeId}`,
  })
  if (res.code == 200) {
    getData()
  }
}

onLoad(() => {
  getData()
})
</script>

<style lang="scss" scoped>
//
</style>
